<template>
  <div v-if="!listLength" class="no-goods">
    <h3>~ 亲, 购物车中没有商品哦! ~</h3>
    <h4>
      ~ 请赶快挑选您中意的宝贝吧~<router-link class="jump" to="/home"
        >点我哦</router-link
      >
      ~
    </h4>
  </div>
</template>

<script>
export default {
  name: 'CartNoGoods',
  props: {
    listLength: {
      type: Number,
      default () {
        return 0
      }
    }
  },
  components: {},
  data () {
    return {}
  },
  created () {},
  mounted () {},
  computed: {},
  methods: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.no-goods {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

  h3,
  h4 {
    font-size: 14px;
  }

  h3 {
    margin: 0 0 3px;
  }

  .jump {
    color: var(--color-tint);
  }
}
</style>
